<template>
  <div class="box">
    <div>{{ content1 }}</div>
    <div>{{ content2.name }}</div>
    <Child></Child>
  </div>
</template>

<script>
// 注意:
//      provide给后代传递参数,当祖先中的数据发生变化的时候,后代的数据是无法接收到的
//      相当于provide只初始化的时候,给后台传递一次数据,后面就不管了
//      那么为什么点击修改对象属性能修改呢?
//      因为对象的地址并没有发生变化,属性变了之后,后代拿到的这个对象还是原来的对象
import Child from './Child'
export default {
  name: 'ProvideInjectTest',
  components: {
    Child
  },
  data() {
    return {
      content1: 'jack',
      content2: {
        name: 'tom'
      }
    }
  },
  // 祖先组件使用 provide 来给后代组件来传递参数
  // 使用方法:
  // 和data配置项类似
  // 都是在其内部返回一个对象
  // 键: 自定义想要传递的属性名
  // 值: 想要传递过去的数据
  provide() {
    return {
      content1: this.content1,
      content2: this.content2,
      // 传递方法
      getContext: this.getContext,
      getContext2: this.getContext2,
      getContext3: this.getContext3
    }
  },
  methods: {
    getContext() {
      this.content1 = 'Tom'
    },
    getContext2() {
      this.content2 = { name: '李四' }
    },
    getContext3() {
      this.content2.name = '王五'
    }
  }
}
</script>

<style lang="less" scoped></style>
